<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>面试题</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .wrap {
      width: 500px;
      margin: 100px auto;
    }

    .logs {
      margin-top: 30px;
    }
  </style>
</head>
<body>

<div id="app" >

  <div class="wrap">
    <div style="margin-bottom: 30px">游戏规则：每行自上而下（其实方向不限）分别是3、5、7根

      安排两个玩家，每人可以在一轮内，在任意行拿任意根牙签，但不能跨行

      拿最后一根牙签的人即为输家</div>
    <div>
      <el-button v-on:click="onClick('a')" :disabled="this.start.a===0">a:{{this.start.a}}</el-button>
      <el-button v-on:click="onClick('b')" :disabled="this.start.b===0">b:{{this.start.b}}</el-button>
      <el-button v-on:click="onClick('c')" :disabled="this.start.c===0">c:{{this.start.c}}</el-button>
    </div>
    <div class="logs">
      <div>游戏记录：</div>
      <div v-for="(log,index) in logs" :key="index">{{log}}</div>
      <div v-show="total===15">
        <el-button type="primary" @click="restart">重新开始</el-button>
      </div>
    </div>
  </div>

</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        name: "A",
        logs: [
          "游戏开始，A玩家先选择"
        ],
        start: {
          a: 3,
          b: 5,
          c: 7
        },
        total: 0

      }
    },
    methods: {
      restart: function () {
        this.name = "A"
        this.logs = [
          "游戏开始，A玩家先选择"
        ]
        this.start = {
          a: 3,
          b: 5,
          c: 7
        }
        this.total = 0
      },
      onClick: function (key) {
        console.log(key)
        var _this = this
        this.$prompt('选择牙签数量', this.name + '玩家', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: "只能输入正整数",
          inputValidator: function (val) {
            var reg = /^[1-9]+[0-9]*]*$/
            if (!reg.test(val)) {
              return "输入不是数字"
            } else if (Number(val) > _this.start[key]) {
              return '输入数量不能超过' + _this.start[key]
            }
            return true
          },
          // inputErrorMessage: this.msg
        }).then(({value}) => {

          this.start[key] = this.start[key] - Number(value)
          this.total += Number(value)
          this.logs.push(this.name + "玩家选择" + key + "区，数量为" + value + "牙签")
          this.$message({
            type: 'success',
            message: this.name + '玩家选择: ' + value
          })
          console.log(15 - this.total)
          if (15 - this.total === 0) {
            // 当前玩家一次选完
            var name = this.name === "A" ? 'B' : "A"
            this.logs.push(name + "玩家已胜利，" + this.name + "玩家已失败")
            return
          }
          this.name = this.name === "A" ? 'B' : "A"

        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.name + '玩家取消输入，请重新选择'
          })
        })
      }
    }
  })
</script>
</body>
</html>
